<template>
    <tm-app color="#EFE8DD">
        <Navbar :shadow="0" :fontSize="40" color="#EFE8DD" title="激活会员" />
        <view class="content">
            <view class="info">
                <tm-avatar linear="top" :size="112" :round="26" :font-size="26"
                    :label="userInfo?.name || ''"></tm-avatar>
                <view class="ml-28">
                    <tm-text :font-size="40" _class="text-weight-b" color="#444444" :label="userInfo.name"></tm-text>
                    <tm-text :font-size="24" color="#444444" :label="phone"></tm-text>
                </view>
            </view>
            <view class="activated-content">
                <view class="activated">
                    <tm-input :font-size="28" placeholderStyle="color:#9F9B94" :inputPadding="[10, 15]"
                        v-model.lazy="code" :showBottomBotder="false">
                        <template #right>
                            <tm-icon @click="handleScan" :fontSize="48" color="rgba(163, 124, 61, 1)"
                                name="tmicon-scan"></tm-icon>
                        </template>
                    </tm-input>
                    <ImageButtom @click="handleUseVipCode" class="activated-btn" :image="BtnBg">
                        <tm-text :font-size="32" color="#fff" label="立即激活会员"></tm-text>
                    </ImageButtom>
                    <view class="rule">
                        <tm-text :font-size="32" color="#666666" label="激活规则"></tm-text>
                        <view class="rule-item">
                            <tm-text :font-size="28" color="#666666" label="会员卡可以通过扫描二维码或手动输入卡号的方式进行激活；"></tm-text>
                        </view>
                        <view class="rule-item">
                            <tm-text :font-size="28" color="#666666" label="会员卡类型为年卡会员，每张会员卡只能被激活一次,无法重复使用；"></tm-text>
                        </view>
                        <view class="rule-item">
                            <tm-text :font-size="28" color="#666666"
                                label="激活账户默认为本机账号，激活前请核实账号信息，确保登录账号为常用账号，激活成功后权益不可转移。"></tm-text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </tm-app>
</template>

<script lang="ts" setup>
    import { ref, computed } from 'vue';
    import Navbar from '@/components/navbar/index.vue';
    import { useUserStore } from "/stores/user.ts";
    import { pageLink } from '/constants/link.ts'
    import { redirect } from '/utils/index.ts'
    import BtnBg from '/static/assets/images/common/btn-bg.png';
    import ImageButtom from '@/components/ImageButton/index.vue';

    const userStore = useUserStore();

    const { phone = "", userInfo = {} } = userStore;

    const code = ref('')

    const handleUseVipCode = async () => {
        const res = await userStore.useVipCode({
            code: code.value
        })
        redirect(`${pageLink.vipActivatedResult}?res=${res ? 'success' : 'fail'}`)
    }

    const handleScan = () => {
        uni.scanCode({
            success: function (res) {
                code.value = res.result;
            }
        });
    }
</script>

<style lang="less" scoped>
    .app {}

    .content {
        padding: 0 26rpx;
        background-image: url('/static/assets/images/my/bg.png');
        background-size: 100% auto;
        background-position: 0 -20%;
        background-repeat: no-repeat;

        .info {
            padding: 40rpx 0 60rpx;
            display: flex;
            align-items: center;
        }

        .activated-content {
            height: 65vh;
            padding: 48rpx 0;
            background-image: url('/static/assets/images/my/vipActived/bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .activated {
                padding: 60rpx 40rpx;
            }

            .activated-btn {
                background-color: #A37C3D;
                color: #fff;
                width: 414rpx;
                height: 88rpx;
                margin: 0 auto;
                margin-top: 40rpx;
            }

            .rule {
                margin-top: 60rpx;

                .rule-item {
                    margin-top: 30rpx;
                    padding-left: 32rpx;
                    position: relative;

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 14rpx;
                        width: 12rpx;
                        height: 12rpx;
                        border-radius: 0px 4rpx 4rpx 4rpx;
                        transform: rotateZ(45deg);
                        background-color: #A37C3D;
                    }
                }
            }
        }
    }
</style>